<template>
    <div class="pm_menu_item">
        <button
            @click="clickHandle"
            id="zeditorlinkbtn"
            :class="{ 'is-active': isActive, link: true}"
            :title="label"
        >
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zeditor-link"></use>
            </svg>
        </button>
    </div>
</template>

<script>

import {m_link} from "./i18n.js"
export default {
    name:'menu_link',
    components: {
    },

    data() {
        return {
            label:m_link,
            linkDialogVisible: false,
        };
    },
    props: ["editor"],
    watch: {
    },
    mounted() {
    },
    beforeUnmount() {
    },
    computed: {
        isActive() {
            console.log('link',this.editor.isFocused, this.editor.isActive('link'))
            return (this.editor.isFocused && this.editor.isActive('link'))||this.linkDialogVisible;
        },
        //,    'is-disabled':isDisabled 
        // isDisabled() {
        //     console.log('link-isDisabled--',this.editor.isFocused, this.editor.isActive('link'),this.editor.state.selection.empty)
        //     return this.editor.isFocused && !this.editor.isActive('link') && this.editor.state.selection.empty
        // }
    },
    methods: {
        clickHandle:function(){

            this.editor.toggleBubbleMenuLink(()=>{
                this.linkDialogVisible = false;
            });
            //强制高亮icon
            this.linkDialogVisible = true;
            // if(this.editor.isActive('link')){
            //     this.editor.chain().focus().run();
            //     this.selectNode();
            //     this.editor.chain().unsetMark('link').run()
            // }else{
            //     this.editor.chain().focus().setMark('link',{href:"https://"}).run()
            //     this.editor.showBubbleMenuLink = true;
            // }
        },
        // selectNode() {
        //     debugger
        //     // 获取当前选区
        //     const selection = this.editor.state.selection;

        //     // 获取当前光标所在的节点
        //     const $cursor = selection.$cursor;
        //     const currentPos = $cursor.pos;

        //     // 确定要扩展到的位置，这里假设扩展到整个文本节点的末尾
        //     const fromPosition = currentPos - $cursor.textOffset;
        //     const toPosition = currentPos + $cursor.nodeAfter.nodeSize;

        //     // 更新选区
        //     editor.commands.setTextSelection({
        //         from: fromPosition,
        //         to: toPosition,
        //     });
        // },
    },
};
</script>

<style lang="scss" scoped>
</style>
